<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
    </div>
    <script>
        // 点击自己五角星变实心，其他兄弟变空心。核心首先所有元素统一设置，然后单独设置当前元素。顺序不能换。
        let spans = document.querySelectorAll('.wrap span')
        // 同样的for循环处理逻辑函数放在外部。只会创建一个函数，放在里面会为每个元素创建此事件函数。浪费内存。
        let fn = function () {
            // 首先设置所有元素统一变为空五角星
            spans.forEach(element => element.innerText = '☆')
            // 然后单独设置当前的操作元素 this==element(不是上一行的element)
            this.innerText = '★' //this表示onclick事件源对象。
        }
        spans.forEach((element, index) => {
            element.onclick = fn
        })
    </script>
</body>

</html>